<template>
  <div>
    <el-container>
      <el-header style="text-align: left;margin: 10px 100px">
        <el-button type="primary" @click="$router.push('DispatchTrackTracking')" plain>轨迹跟踪</el-button>
        <el-button type="primary" @click="$router.push('DispatchNodeTracking')" plain>节点跟踪</el-button>
        <el-button type="primary" @click="$router.push('DispatchTransportationTrack')" style="float: right" plain>返回</el-button>
      </el-header>
      <el-main>
        <!-- 时间线-->
        <el-timeline style="text-align: left;margin: 10px 100px">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "DispatchNodeTracking",
  data() {
    return {
      // 时间线数组
      activities: []
    };
  },
  methods: {
    // 获取时间线数组数据
    getList(){
      // 获取调度单状态列表,列表为时间顺序存放的
      let statusList = this.$store.state.dispatchTicket.orderStatusList
      // 遍历调度单状态列表,赋值时间线数组
      for(let i = 0; i<statusList.length; i++) {
        if(statusList[i].statusName=='待提货'){
          let temp ={
            content: '已下单',
            timestamp: statusList[i].statusTime,
            size: 'large'
          }
          this.activities.push(temp)
        }else if(statusList[i].statusName=='发车') {
          let temp ={
            content: '已发车',
            timestamp: statusList[i].statusTime,
            size: 'large'
          }
          this.activities.push(temp)
        }else if(statusList[i].statusName=='提货') {
          let temp ={
            content: '已提货'+statusList[i].statusOrderId,
            timestamp: statusList[i].statusTime,
            size: 'large'
          }
          this.activities.push(temp)
        }else if(statusList[i].statusName=='已送达') {
          let temp ={
            content: statusList[i].statusCity.mergerName+'中转：送达'+statusList[i].statusOrderId,
            timestamp: statusList[i].statusTime,
            size: 'large'
          }
          this.activities.push(temp)
        }
      }
    }
  },
  mounted() {
    this.getList()
  }
}
</script>
<style scoped>

</style>
